<template>
	<view class="order-list pages" :class="themeName">
		<view class="order-item">
			<view class="order-item-box">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
					@down="downCallback" :fixed="false" :bottom="0">
					<view class="user-fans">
						<view class="header">
							<view class="bg-white p-20">
								<u-search v-model="keyword" shape="round" :placeholder="$zhTran('请输入搜索关键词')"
									@search="changeTab" @custom="changeTab" />
							</view>

							<!-- <view class="top-bar flex bg-white md">
								<view class="bar-item flex" :class="{'item-active': active == 'all'}"
									@tap="changeTab('all')">
									{{$zhTran('全部粉丝')}}
								</view>
								<view class="bar-item flex" :class="{'item-active': active == 'first'}"
									@tap="changeTab('first')">
									{{$zhTran('一级粉丝')}}
								</view>
								<view class="bar-item flex" :class="{'item-active': active == 'second'}"
									@tap="changeTab('second')">
									{{$zhTran('二级粉丝')}}
								</view>
							</view> -->
							<view class="sort-bar flex bg-white">
								<view class="sort-bar-item flex row-center" @tap="sortChange(0)">
									<view :class="sortType == 0 ? 'item-active' : ''">{{$zhTran('团队排序')}}</view>
									<view class="arrow-icon flex-col col-center row-center">
										<u-icon name="arrow-up-fill"
											:color="fansSort == 'asc' ? themeColor : '#333333'"></u-icon>
										<u-icon name="arrow-down-fill"
											:color="fansSort == 'desc' ? themeColor : '#333333'"></u-icon>
									</view>
								</view>
								<view class="sort-bar-item flex row-center" @tap="sortChange(1)">
									<view :class="sortType == 1 ? 'item-active' : ''">{{$zhTran('金额排序')}}</view>
									<view class="arrow-icon flex-col col-center row-center">
										<u-icon name="arrow-up-fill"
											:color="moneySort == 'asc' ? themeColor : '#333333'"></u-icon>
										<u-icon name="arrow-down-fill"
											:color="moneySort == 'desc' ? themeColor : '#333333'"></u-icon>
									</view>
								</view>
								<view class="sort-bar-item flex row-center" @tap="sortChange(2)">
									<view :class="sortType == 2 ? 'item-active' : ''">{{$zhTran('订单排序')}}</view>
									<view class="arrow-icon flex-col col-center row-center">
										<u-icon name="arrow-up-fill"
											:color="orderSort == 'asc' ? themeColor : '#333333'"></u-icon>
										<u-icon name="arrow-down-fill"
											:color="orderSort == 'desc' ? themeColor : '#333333'"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="content">
							<view class="card-box p-t-20">
								<view v-for="(item, index) in fansList" :key="index"
									class="card-item flex row-between bg-white p-20">
									<view class="flex">
										<u-image :src="item.avatar" border-radius="50%" width="100rpx"
											height="100rpx" />
										<view class="fans-info m-l-20">
											<view class="fans-name bold line-1">{{item.nickname}}</view>
											<view class="lighter xs">
												<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
												<view>{{item.create_time}}</view>
											</view>
										</view>
									</view>
									<view class="flex-col xs flex-none m-l-20 text-right">
										<view class="msg"><span class="fans-num">{{item.fans}} </span>{{$zhTran('人')}}
										</view>
										<view class="m-t-5 msg"><span>{{item.order_num}} </span>{{$zhTran('单')}}</view>
										<view class="m-t-5 msg"><span>{{item.order_amount}} </span>{{price_unit}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
			<w-jishuzhichi class="jishuzhichi-nodata" />
		</view>
	</view>
</template>

<script>
	import {
		SortEnum,
	} from '@/utils/enum';
	import {
		apiDistributionFans
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '',
						tip: this.$zhTran('暂无相关数据'), // 提示
					}
				},
				active: 'all',
				sortType: -1,
				keyword: "",
				fansSort: SortEnum['NONE'],
				moneySort: SortEnum['NONE'],
				orderSort: SortEnum['NONE'],
				fansList: [],
				price_unit: this.$zhTran('元')
			};
		},
		methods: {
			onRefresh() {
				this.fansList = []
				this.mescroll.resetUpScroll();
			},

			// 上拉加载 
			upCallback(page) {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					keyword,
				} = this;
				const params = {
					type: active,
					keyword,
					fans: fansSort,
					order_amount: moneySort,
					order_num: orderSort,
					page_size: page.size,
					page_no: page.num,
				};
				apiDistributionFans(params).then((data) => {
					if (page.num == 1) this.fansList = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					this.price_unit = data.extend.price_unit
					this.price_unit = this.$zhTran(this.price_unit)
					this.fansList = this.fansList.concat(curPageData);
					this.fansList = this.$zhTran(this.fansList)
					this.mescroll.endSuccess(curPageLen, data.count);
				}).catch(() => {
					this.mescroll.endErr()
				})

			},

			changeTab(val) {
				this.active = val
				this.onRefresh()
			},

			// 排序状态变化 
			sortChange(type) {
				let {
					fansSort,
					moneySort,
					orderSort
				} = this;

				this.sortType = parseInt(type)

				switch (this.sortType) {
					case 0:
						// 团队排序
						if (fansSort == SortEnum['DESC '] || fansSort == SortEnum['NONE']) {
							this.fansSort = SortEnum['ASC'];
							this.moneySort = SortEnum['NONE']
							this.orderSort = SortEnum['NONE']
						} else if (fansSort == SortEnum['ASC']) {
							this.fansSort = SortEnum['DESC'];
							this.moneySort = SortEnum['NONE'];
							this.orderSort = SortEnum['NONE'];
						}
						break;

					case 1:
						// 金额排序
						if (moneySort == SortEnum['DESC '] || moneySort == SortEnum['NONE']) {
							this.moneySort = SortEnum['ASC'];
							this.fansSort = SortEnum['NONE'];
							this.orderSort = SortEnum['NONE']
						} else if (moneySort == SortEnum['ASC']) {
							this.moneySort = SortEnum['DESC'];
							this.fansSort = SortEnum['NONE'];
							this.orderSort = SortEnum['NONE'];
						}

						break;
					case 2:
						// 订单排序
						if (orderSort == SortEnum['DESC '] || orderSort == SortEnum['NONE']) {
							this.orderSort = SortEnum['ASC'];
							this.moneySort = SortEnum['NONE'];
							this.fansSort = SortEnum['NONE'];
						} else if (orderSort == SortEnum['ASC']) {
							this.orderSort = SortEnum['DESC'];
							this.moneySort = SortEnum['NONE'];
							this.fansSort = SortEnum['NONE'];
						}

						break;
				}

				this.onRefresh()
			}
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - 90rpx - constant(safe-area-inset-bottom));
				height: calc(100% - 90rpx - env(safe-area-inset-bottom));
			}
		}
	}

	.user-fans {
		.header {
			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					padding: 0 30rpx;
					height: 58rpx;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					@include background_color();
					border-radius: 100rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						@include font_color()
					}
				}
			}
		}
	}

	.content {
		.card-box {
			.card-item {
				.fans-name {
					width: 450rpx;
				}

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.fans-num {
					@include font_color()
				}
			}
		}
	}
</style>